<style include="internet-shared iron-flex">
  cr-policy-indicator {
    margin-inline-start: var(--settings-controlled-by-spacing);
  }
</style>

<div class="settings-box first">
  <div class="settings-box-text">$i18n{knownNetworksMessage}</div>
</div>

<div class="settings-box settings-box-text">
  <div class="secondary">$i18n{knownNetworksPreferred}</div>
</div>
<div class="list-frame vertical-list"
    hidden$="[[havePreferred_(networkStateList_)]]">
  <div class="list-item settings-box-text">
    $i18n{internetNoNetworks}
  </div>
</div>
<div id="preferredNetworkList" class="list-frame vertical-list"
    hidden$="[[!havePreferred_(networkStateList_)]]">
  <template is="dom-repeat" items="[[networkStateList_]]"
      filter="networkIsPreferred_">
    <div class="list-item">
      <cr-link-row embedded label="[[getNetworkDisplayName_(item)]]"
          on-click="fireShowDetails_"
          role-description="$i18n{subpageArrowRoleDescription}"
          deep-link-focus-id$="[[Setting.kForgetWifiNetwork]]">
        <template is="dom-if" if="[[isPolicySource(item.source))]]">
          <cr-policy-indicator on-click="doNothing_"
              indicator-type="[[getIndicatorTypeForSource(item.source)]]">
          </cr-policy-indicator>
        </template>
      </cr-link-row>
      <div class="separator"></div>
      <cr-icon-button class="icon-more-vert" tabindex$="[[tabindex]]"
          on-click="onMenuButtonTap_" title="$i18n{moreActions}">
      </cr-icon-button>
    </div>
  </template>
</div>

<div class="settings-box settings-box-text">
  <div class="secondary">$i18n{knownNetworksAll}</div>
</div>
<div id="notPreferredNetworkList" class="list-frame vertical-list"
    hidden$="[[!haveNotPreferred_(networkStateList_)]]">
  <template is="dom-repeat" items="[[networkStateList_]]"
      filter="networkIsNotPreferred_">
    <div class="list-item">
      <cr-link-row embedded label="[[getNetworkDisplayName_(item)]]"
          on-click="fireShowDetails_"
          role-description="$i18n{subpageArrowRoleDescription}"
          deep-link-focus-id$="[[Setting.kPreferWifiNetwork]]
              [[Setting.kForgetWifiNetwork]]">
        <template is="dom-if" if="[[isPolicySource(item.source))]]">
          <cr-policy-indicator on-click="doNothing_"
              indicator-type="[[getIndicatorTypeForSource(item.source)]]">
          </cr-policy-indicator>
        </template>
      </cr-link-row>
      <div class="separator"></div>
      <cr-icon-button class="icon-more-vert" tabindex$="[[tabindex]]"
          on-click="onMenuButtonTap_" title="$i18n{moreActions}">
      </cr-icon-button>
    </div>
  </template>
</div>

<cr-action-menu id="dotsMenu" role-description="$i18n{menu}">
  <button class="dropdown-item" hidden="[[!showAddPreferred_]]"
      on-click="onAddPreferredTap_">
    $i18n{knownNetworksMenuAddPreferred}
  </button>
  <button class="dropdown-item"
      hidden="[[!showRemovePreferred_]]" on-click="onRemovePreferredTap_">
    $i18n{knownNetworksMenuRemovePreferred}
  </button>
  <button class="dropdown-item" disabled="[[!enableForget_]]"
      on-click="onForgetTap_">
    $i18n{knownNetworksMenuForget}
  </button>
</cr-action-menu>

